<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart {
			width: 1500px;
			height: 1000px;
		}
	</style>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart"></div>
	<script>
		var myChart = echarts.init(document.getElementById('chart'));
		var colors = ['#5793f3', '#d14a61', '#675bba'];

		myChart.setOption({
			color: colors,
			legend: {},
			grid:{
				right:"20%",
			},
			tooltip:{
				/* axisPointer:{
					type:'cross',
				} */
				show:true,
				trigger:'axis',
				showContent:true,
				alwaysShowContent:false,
				triggerOn:'mousemove',
				//showDelay:500,
				hideDelay:1000,
				//enterable:true,
				confine:false,
				transitionDuration:0.4,
				position: [10, 10],
				position: ['50%', '50%'],
				position: function(point, params, dom, rect, size){
					//console.log(size);
					//return [point[0]+100, point[1]+100];
					var middle=size.viewSize[0]/2;	//echarts容器宽度的一半
					if(point[0]<middle){
						//这个条件成立说明现在鼠标在容器的左半边
						return {
							left:point[0],
							top:point[1],
						}
					}else{
						//这个条件成立说明鼠标现在在容器的右半边
						return {
							left:point[0]-size.contentSize[0],
							top:point[1],
						}
					}
				},
				formatter:'{b}份的数据：<br> {a0} : {c0} <br> {a1} : {c1} <br> {a2} : {c2} <br>',
				formatter:function(params, ticket, callback){
					//console.log(params);

					var str=params[0].name+'份的数据：<br>'
							+params[0].seriesName+' : '+params[0].value+'<br>'
							+params[1].seriesName+' : '+params[1].value+'<br>'
							+params[2].seriesName+' : '+params[2].value;

					return str;
				},
				backgroundColor:'rgba(255,50,50,0.7)',
				borderColor:'green',
				borderWidth:2,
				textStyle:{
					color:'#000',
				},
				extraCssText:'box-shadow: 0 0 3px rgba(0, 0, 0, 1);',
			},
			xAxis: {
				axisTick: {
					alignWithLabel: true
				},
				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
			},
			yAxis: [
				{
					//蒸发量
					name: '蒸发量',
					position:'right',
					min:0,
					max:250,
					axisLabel:{
						formatter:'{value} ml',
					},
					axisLine:{
						lineStyle:{
							color:colors[0]
						}
					}
				},
				{
					//降水量
					name: '降水量',
					position:'right',
					offset:80,
					min:0,
					max:250,
					axisLabel:{
						formatter:'{value} ml',
					},
					axisLine:{
						lineStyle:{
							color:colors[1]
						}
					}
				},
				{
					//平均温度
					name: '温度',
					min:0,
					max:25,
					axisLabel:{
						formatter:'{value} °C',
					},
					axisLine:{
						lineStyle:{
							color:colors[2]
						}
					}
				},
			],
			series: [
				{
					name: '蒸发量',
					type: 'bar',
					yAxisIndex:0,
					data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
				},
				{
					name: '降水量',
					type: 'bar',
					yAxisIndex:1,
					data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
				},
				{
					name: '平均温度',
					type: 'line',
					yAxisIndex:2,
					data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
				},
			]
		});
	</script>
</body>

</html>